<template>
  <div class="formComponent">
    <el-form ref="form" label-width="80px">
      <el-form-item
        v-for="formItem in props.formModel"
        :label="formItem.fieldName"
        :key="formItem.fieldCode"
      >
        <el-input
          v-if="formItem.fieldType === 'input'"
          v-model="modelValue[formItem.fieldCode]"
          placeholder="请输入"
          v-bind="generateProps(formItem)"
        />
        <el-input-number
          v-else-if="formItem.fieldType === 'number'"
          v-model="modelValue[formItem.fieldCode]"
          placeholder="请输入"
          v-bind="generateProps(formItem)"
        />
        <el-switch
          v-else-if="formItem.fieldType === 'switch'"
          v-model="modelValue[formItem.fieldCode]"
          v-bind="generateProps(formItem)"
        />
        <el-select
          v-else-if="formItem.fieldType === 'select'"
          v-model="modelValue[formItem.fieldCode]"
          placeholder="请选择"
        >
          <el-option
            v-for="option in formItem.options"
            :key="option.value"
            :label="option.name"
            :value="option.value"
            v-bind="generateProps(formItem)"
          />
        </el-select>
        <el-color-picker
          v-else-if="formItem.fieldType === 'color'"
          v-model="modelValue[formItem.fieldCode]"
          show-alpha
          v-bind="generateProps(formItem)"
        />
        <color-group
          v-else-if="formItem.fieldType === 'colorGroup'"
          v-model="modelValue[formItem.fieldCode]"
          v-bind="generateProps(formItem)"
        />
        <image-upload
          v-else-if="formItem.fieldType === 'image'"
          v-model="modelValue[formItem.fieldCode]"
          v-bind="generateProps(formItem)"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import ColorGroup from "./form/ColorGroup.vue";
import ImageUpload from "./form/ImageUpload.vue";

const props = defineProps<{
  formModel: configItem[];
}>();

const modelValue = defineModel<any>({ required: true })  


const generateProps = (formItemConfig: configItem) => {
  const { props } = formItemConfig;
  if (typeof props === "object") {
    return props;
  }
  return {};
};
</script>
